<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>JavaScript: The Good Parts - Closure</title>
		<style type="text/css">
			div#header {
				color: #0066FF;
				font-size: 25pt;
			}
			
			div#content {
				width: auto;
				height: auto;
				color: #B088FF;
				font-size: 12pt;
				z-index: 1;
			}
			
			div.pic {
				width: 200px;
				height: 200px;
				background-image: url(../../pics/Ascension.jpg);
				z-index: 2;
				float: left;
				cursor: pointer;
			}
			
			div.pic#img {
				background-image: url(../../pics/AskTheAges.jpg);
			}
			
			div#divResultBlock {
				float: none;
				position: relative;
			}
		</style>
		<!-- embed jquery by google，藉由google嵌入jquery 1.6.2 -->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript" language="javascript">
			google.load( "jquery", "1.6.2" );
		</script>
		<script type="text/javascript">
			
			var myObject = function() {
				
				alert( "initializ now... " );  // 最先被執行
				
				var value = 100;  // 小心，這是free variable
				var returnValeu = {
					increment: function( inc ) {  // closure
						if( typeof( inc ) === "number" ) {
							value += inc;
						} else {
							value++;
						}
					},
					getValue: function() {  // closure
						return value;
					}
				};
				return returnValeu;
			}();  // 注意! 宣告之後，「立刻執行該匿名函式!」，所以，並未指派該匿名函式給myObject
				  // 而是指派該匿名函式的回傳值給myObject變數
			
			$( document ).ready( function() {
				alert( "myObject.getValue() is: " + myObject.getValue() );
				
				$( ".pic:first" ).click( pic_onclick );
				var divImgDom = document.getElementById( "img" );
				divImgDom.onclick = img_onclick;
			});
			
			// 事件處理常式
			function pic_onclick( evt ) {
				// this參照指向被觸發onclick事件的DOM元素
				alert( "pic_onclick this.className: " + this.className );
				
				var event = evt || window.event;
				var targetDOM = event.target || event.srcElement;
				
				// alert( "pic_onclick targetDOM.className: " + targetDOM.className );
				
				$( "#divResultBlock" ).append( "pic_onclick targetDOM.className: " + targetDOM.className + "<br />" );
			}
			
			// 事件處理常式
			function img_onclick( evt ) {
				// this參照指向被觸發onclick事件的DOM元素
				alert( "img_onclick this.id: " + this.id );
				
				var event = evt || window.event;
				var targetDOM = event.target || event.srcElement;
				
				// alert( "img_onclick targetDOM.className: " + targetDOM.className );
				
				$( "#divResultBlock" ).append( "img_onclick targetDOM.id: " + targetDOM.id + "<br />" );
				//$( "#divResultBlock" ).append( "uid: " + targetDOM.getAttribute( "id" ) + "<br />" );
			}
		</script>
		
	</head>
	
	<body>
		<div title="Chapter04" id="header">JavaScript: The Good Parts - Ch04 Function</div>
		<div title="lab" id="content">
			<div title="more info?" class="pic"></div>
			<div title="more info?" class="pic" id="img"></div>
			<div id="divResultBlock" uid="This is my custom attribute">
				<p>Here are the result:</p>
			</div>
		</div>
	</body>
</html>